<!DOCTYPE HTML>
<html xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:p="http://primefaces.org/ui" 
      xmlns:components="http://java.sun.com/jsf/composite/components" 
      xmlns:sec="http://www.springframework.org/security/tags">
    <ui:composition template="../../templates/template.xhtml" >

        <ui:param name="selectedMenuIndex" value="items" />
        <ui:define name="header-content">
            <h:form id="small-menu">
                <section id="content-title">
                    <h:outputText value="#{msgs['itemListPage.content.title']}" styleClass="content-title"/>
                    <h:panelGroup styleClass="icons" layout="block">
                        <h:panelGroup styleClass="icon search" layout="block">
                            <a id="search-item" href="#"></a>
                        </h:panelGroup>    
                        <h:panelGroup styleClass="icon delete" layout="block">
                            <h:commandLink id="delete-multiple-items" >
                                <f:ajax render="@this" onevent="confirmationMultiple.show()"/>
                            </h:commandLink>    
                        </h:panelGroup>    
                        <h:panelGroup styleClass="icon add" layout="block">
                            <h:commandLink id="add-items" action="item-add"/>    
                        </h:panelGroup>    
                        <h:panelGroup id="search-bar" styleClass="search-box-container" layout="block">
                            <h:inputText id="search-box-input"  styleClass="search-box" value="#{itemListBean.itemCriteria.searchValue}">
                                <f:ajax event="keyup" render=":items-form" listener="#{itemListBean.search}" />
                            </h:inputText>    
                        </h:panelGroup>    
                    </h:panelGroup>    
                </section>
            </h:form>
        </ui:define>
        <ui:define name="content">
            <h:form id="items-form">
                <h:panelGroup id="top-message" rendered="false" />
                <h:messages for="top-message"  errorClass="errors" infoClass="success" warnClass="warning"/>
                <h:messages globalOnly="true" errorClass="errors" infoClass="success" warnClass="warning"/>

                <h:panelGroup styleClass="empty" layout="block" rendered="#{empty itemListBean.items}">
                    <h:outputText value="#{msgs['global.empty.list']}"/>
                </h:panelGroup>

                <h:dataTable value="#{itemListBean.items}" var="item" columnClasses="check,image,info,price" 
                             styleClass="items-table" rendered="#{ not empty itemListBean.items}">
                    <h:column>
                        <f:ajax event="valueChange" render="selectedItem" listener="#{itemListBean.triggerSelect(item)}">
                            <f:param name="selected" value="#{itemListBean.selectedItems.contains( item )}" />
                            <h:panelGroup id="selectedItem" layout="block" styleClass="#{selected ? 'item-check-input selectedItem': 'item-check-input' }" >
                                <p><h:selectBooleanCheckbox value="#{selected}" /></p>    
                            </h:panelGroup>    
                        </f:ajax>    
                    </h:column>
                    <h:column>
                        <h:graphicImage url="/img/no-photo.jpg" />
                    </h:column>
                    <h:column>
                        <h:panelGroup styleClass="title" layout="block">
                            <h2><h:outputText value="#{item.title}"/></h2>
                            <h:panelGroup styleClass="about">
                                <h:outputText value="#{item.addedDate}" >
                                    <f:convertDateTime pattern="#{msgs['itemListPage.itemstable.info.about.date.pattern']}"/>
                                </h:outputText>
                                -
                                <h:outputText value="#{item.postalCode}" />
                                -
                                <h:outputText value="#{item.region.name}" />
                            </h:panelGroup>
                        </h:panelGroup>
                        <h:panelGroup styleClass="icons" layout="block">
                            <h:panelGroup styleClass="icon view" layout="block">
                                <h:link styleClass="item-view" outcome="item-view" >
                                    <f:param name="id" value="#{item.id}" />
                                </h:link> 
                            </h:panelGroup>    
                            <h:panelGroup styleClass="icon edit" layout="block">
                                <h:link styleClass="item-edit" outcome="item-update">
                                    <f:param name="id" value="#{item.id}" /> 
                                </h:link> 
                            </h:panelGroup>    
                            <h:panelGroup styleClass="icon delete" layout="block">
                                <h:commandLink styleClass="item-delete" action="#{itemListBean.setCurrentObject( item )}" >
                                    <f:ajax render="@this" onevent="confirmation.show()"/>
                                </h:commandLink>    
                            </h:panelGroup>    
                        </h:panelGroup>
                        <h:panelGroup styleClass="description" layout="block">
                            <p class="description-text"><h:outputText value="#{item.shortDescription}" /></p>
                        </h:panelGroup>
                    </h:column>
                    <h:column>
                        <h:outputText value="#{item.price}" >
                            <f:convertNumber type="currency" groupingUsed="true" minFractionDigits="2"
                                             currencySymbol="#{msgs['itemListPage.itemstable.price.currencySymbol']}" />
                        </h:outputText>
                    </h:column>
                </h:dataTable>
            </h:form>
            <h:form id="confirmation-delete-form">
                <p:confirmDialog closable="false" id="confirmDialog" message="#{msgs['itemListPage.items.delete.confirm']}" visible="false"
                                 severity="alert" widgetVar="confirmation">  
                    <p:commandButton id="confirm" value="#{msgs['global.yes']}" action="#{itemListBean.delete}" 
                                     process="@this" update=":items-form" oncomplete="confirmation.hide();" />  
                    <p:commandButton id="decline" value="#{msgs['global.no']}" onclick="confirmation.hide();" />  
                </p:confirmDialog>
            </h:form>
            <h:form id="confirmation-delete-multiple-form">
                <p:confirmDialog closable="false" id="confirmDialog" visible="false" message="#{msgs['itemListPage.items.delete.multiple.confirm']}"
                                 severity="alert" widgetVar="confirmationMultiple">  
                    <p:commandButton id="confirm" value="#{msgs['global.yes']}" action="#{itemListBean.deleteSelectedItems}" 
                                     process="@this" update=":items-form" oncomplete="confirmationMultiple.hide();" />  
                    <p:commandButton id="decline" value="#{msgs['global.no']}" onclick="confirmationMultiple.hide();" />  
                </p:confirmDialog>
            </h:form>
        </ui:define>
    </ui:composition>
</html>